<template>
	<view class="page">
		<view class="background-view"> </view>
		<view class="userInfo-box">
			<image class="userImage" :src="getAvatar(userInfo.avatar)"></image>
			<view class="user-text">
				<view class="view-item text-overflow">{{userInfo.nickName}}</view>
<!-- 				<view class="view-item text-overflow">个性签名</view> -->
			</view>
			<view class="config flex-center">
				<!-- <image src="@/static/myIcon/config.png"></image> -->
			</view>
		</view>

		<view class="user-info-card">
			<view class="item">
				<view class="item-2 text-overflow">{{userCountList.likesCount}}</view>

				<view class="item-1 text-overflow">获赞</view>
			</view>
			<view class="item">
				<view class="item-2 text-overflow">{{userCountList.followFanCount}}</view>

				<view class="item-1 text-overflow">粉丝</view>
			</view>
			<view class="item">
				<view class="item-2 text-overflow">{{userCountList.followCount}}</view>

				<view class="item-1 text-overflow">关注</view>
			</view>
		</view>

		<view class="list-box">
			<view class="box">
				<view class="box-title">
					<view class="navTitle" v-for="(item,index) in navList" :key="index">
						<view :class="{'active':isActive === index}" @click="checked(index)">
							{{item.title}}
						</view>

					</view>
				</view>
				<view class="box-content" v-if="isActive == 1">
					<view class="box-content_article" v-for="item in articleExamineList" :key="item.categoryId">
						<view v-if="item.articleStatus == 1" style="height:200rpx;" @click="openPage(item)">
							<view class="box-content_article__title">
								<u-tag text="审核中" type="warning" show="false" mode="dark" shape="circleRight" />
								<text>{{item.articleTitle}}</text>
							</view>
							<view class="box-content_article__content">
								<text>{{item.articleKeywords!= null ? item.articleKeywords:''}} </text>
							</view>
						</view>
						<view v-if="item.articleStatus == 3" style="height:200rpx;">
							<view class="box-content_article__title" @click="openPage(item)">
								<u-tag text="审核未通过" type="warning" show="false" mode="dark" shape="circleRight" />
								<text>{{item.articleTitle}}</text>
							</view>
							<view class="box-content_article__content">
								<text>{{item.articleKeywords!= null ? item.articleKeywords:''}}</text>
							</view>
						</view>
						<view v-if="item.articleStatus == 2" style="height:230rpx;" @click="openPage(item)">
							<view class="box-content_article__title" @click="openPage(item)">
								<u-tag text="审核通过" type="primary" show="false" mode="dark" shape="circleRight" />
								<text>{{item.articleTitle}}</text>
							</view>
							<view class="box-content_article__content">
								<text>{{item.articleKeywords!= null ? item.articleKeywords:''}}</text>
							</view>
							<view class="box-content_article__bottom">
								<view class="" slot="foot">
									<u-icon name="thumb-up" size="34" color="#3BA2FF" :label="item.likes"></u-icon>
								</view>
								<view class="" slot="foot">
									<u-icon name="chat" size="34" color="#3BA2FF" :label="item.comments"></u-icon>
								</view>
								<view class="" slot="foot">
									<u-icon name="zhuanfa" size="34" color="#3BA2FF" label="0"></u-icon>
								</view>
							</view>
						</view>
					</view>

				</view>
				<view v-if="isActive == 0">
					<u-cell-group>
						<u-cell-item title="昵称" :value="userInfo.nickName" :arrow="false"></u-cell-item>
						<u-cell-item title="电话" :value="userInfo.phonenumber" :arrow="false"></u-cell-item>
						<u-cell-item title="企业邮箱" :value="userInfo.email" :arrow="false"></u-cell-item>
						<u-cell-item title="部门" :value="userInfo.deptName" :arrow="false"></u-cell-item>
						<u-cell-item title="职位" :value="userInfo.postNames" :arrow="false"></u-cell-item>
					</u-cell-group>
				</view>
			</view>
		</view>
	</view>
</template>



<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {
				userCountList: {},
				articleExamineList: [], // 审核list
				collectionArticleList: [], // 收藏list
				userInfo: {avatar:""},
				userFollow: 0,
				userUser: 0,
				isActive: 0,
				userId: "",
				navList: [{
					index: 0,
					title: "主页"
				}, {
					index: 1,
					title: '技术分享'
				}],
			};
		},
		//监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参）
		onShow() {
			this.getOtherUserInfo();
			this.getUserInfoListCount();
				this.getCollectionArticleList();
			 	this.getArticleList();
			
		},
		computed: {
			...mapGetters(['getUserinfo', 'getNeedAuth', 'getIsLogin', 'getMenu'])
		},
		created() {},
		methods: {
			...mapActions(['login', 'authUserInfo']),

			onLoad(option) {

				this.userId = option.userId;
				

			},
			openPage(item) {
				uni.navigateTo({
					url: '/subpackage/industry_dynamic_detail/industry_dynamic_detail?articleId=' + item.articleId
				})
			},
			getAvatar(avatar)
			{
				return this.baseUrl+avatar;
			},
			getOtherUserInfo() {
				let params = {
					userId: this.userId
				}
				var that = this;
				this.$u.api.getOtherUserInfo(params)
					.then(res => {
						that.userInfo = res.user;
					});
			},


			//  获取用户 点赞，关注，粉丝 数量
			getUserInfoListCount() {
				let params = {
					userId: this.userId
				}
				this.$u.api.getUserInfoListCount(params)
					.then(res => {
						if (res.code != '200') return this.$u.toast(res.msg);

						this.userCountList = res.data
					});
			},


			// 获取 所有 自己发布的文章信息
			getArticleList() {
				let params = {
					userId: this.userId
				}
				this.$u.api.articleTypeListAll(params)
					.then(res => {
						if (res.code != '200') return this.$u.toast(res.msg);
						this.articleExamineList = res.rows
					});
			},
			// 跳转页面
			checked(index) {

				this.isActive = index
				if (index == 1) {

				} else if (index == 0) {
					this.getArticleList();
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	.page {
		position: relative;
		height: 100vh;
		background-color: #f2f2f2;
		animation: text linear 0.4s;
	}

	.background-view {
		height: 20%;
		background-color: #3BA2FF;
		border-bottom-left-radius: 30%;
		border-bottom-right-radius: 30%;
	}

	.userInfo-box {
		top: 4%;
		position: absolute;
		width: 90%;
		left: 50%;
		transform: translate(-50%, 0);
		padding: 20rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
		flex-wrap: wrap;
		height: 150rpx;
		background-color: white;
		box-shadow: 0px 1px 2px #e3e3e3;

		.userImage {
			width: 20%;
			height: 100%;
			border-radius: 50%;
		}

		.user-text {
			width: 70%;
			color: red;
			font-size: 1em;

			.view-item {
				margin-left: 20rpx;
				line-height: 2;
			}
		}

		.config {
			width: 10%;
			overflow: hidden;
			height: 100%;

			image {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}

	.user-info-card {
		top: 15%;
		position: absolute;
		width: 90%;
		left: 50%;
		transform: translate(-50%, 0);
		height: 150rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 30rpx;
		background-color: white;
		box-shadow: 0px 1px 2px #e3e3e3;

		.item {
			width: 35%;
			display: flex;
			align-items: center;
			flex-direction: column;
			height: 100%;

			.item-1 {
				font-size: 1.2em;
				width: 100%;
				text-align: center;
			}

			.item-2 {
				text-align: center;
				width: 100%;
				margin-top: 10rpx;
			}
		}
	}

	.text-overflow {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}


	.list-box {
		// height: 380rpx;
		margin-top: 55px;

		// background-color: lightgreen;
		.box {
			background-color: white;
			width: 100%;
			height: 90%;
			display: flex;
			flex-direction: column;
			box-shadow: 0px 1px 2px #e3e3e3;

			.box-title {
				width: 100%;
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: space-around;
				border-bottom: 2px solid #d8d8d8;


				.navTitle {
					height: 60rpx;
					line-height: 60rpx;
					width: 100%;
					text-align: center;
					font-size: 32rpx;
					font-family: Alibaba PuHuiTi;
					color: #333;
				}

				.active {
					position: relative;
					color: #1F75FE;
				}

				.active::after {
					content: "";
					position: absolute;
					width: 100rpx;
					height: 4rpx;
					background-color: #1F75FE;
					left: 0px;
					right: 0px;
					bottom: 0px;
					margin: auto;
				}

				.text1 {
					font-size: 1.3em;
					text-indent: 1em;
				}

				.text2 {
					color: #d8d8d8;
					font-size: 1.2em;
					display: flex;
					align-items: center;
					margin-right: 20rpx;

					image {
						margin-left: 20rpx;
						width: 40rpx;
						height: 40rpx;
					}
				}
			}

			// 技术分享
			.box-content {
				height: 60%;
				padding: 20rpx 40rpx 40rpx 40rpx;
				display: flex;
				justify-content: start;
				flex-wrap: wrap;

				.box-content_article {
					margin-top: 10rpx;
					width: 100%;
					border-bottom: 1px solid #E5E5E5;

					.box-content_article__title {
						height: 60rpx;
						line-height: 60rpx;
						font-weight: bold;
						font-size: 28rpx;
						color: #1A1A1A;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;

						text {
							margin-left: 5rpx;
						}

					}

					//  box 内容
					.box-content_article__content {
						height: 95rpx;
						line-height: 50rpx;
						text-overflow: -o-ellipsis-lastline;
						letter-spacing: 3rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						line-clamp: 2;
						-webkit-box-orient: vertical;
					}

					.box-content_article__bottom {
						margin-top: 20rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
					}
				}

			}

			// 收藏
			.box-content_collection {
				padding: 10rpx 40rpx;
				height: 100%;

				.box-content_collection_view {
					height: 200rpx;
					margin-top: 30rpx;
					border-bottom: 1px solid #CCCCCC;
					display: flex;
					flex-direction: column;
					justify-content: space-around;

					.box-content_collection_content {
						margin-top: 10rpx;
						height: 140rpx;

						.box-content_collection_content_title {
							height: 60rpx;
							line-height: 60rpx;
							font-weight: bold;
							font-size: 28rpx;
							color: #1A1A1A;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;

							text {
								margin-left: 5rpx;
							}
						}

						.box-content_collection_content_info {
							height: 95rpx;
							line-height: 50rpx;
							text-overflow: -o-ellipsis-lastline;
							letter-spacing: 3rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							line-clamp: 2;
							-webkit-box-orient: vertical;
						}
					}
				}


				.box-content_collection_content {
					margin-top: 10rpx;
					height: 160rpx;

					.box-content_collection_content_title {
						height: 60rpx;
						line-height: 60rpx;
						font-weight: bold;
						font-size: 28rpx;
						color: #1A1A1A;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;

						text {
							margin-left: 5rpx;
						}
					}

					.box-content_collection_content_info {
						height: 95rpx;
						line-height: 50rpx;
						text-overflow: -o-ellipsis-lastline;
						letter-spacing: 3rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						line-clamp: 2;
						-webkit-box-orient: vertical;
					}
				}
			}
		}

		.flex-center {
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>
